<template>
  <!-- 自定义弹出对话框 -->
  <div v-if="showDialog" class="dialog-overlay">
    <div class="dialog-container" @click.stop>
      <div class="dialog-header">
        <h3>{{ dialogTitle }}</h3>
        <button class="dialog-close" @click="closeDialog">×</button>
      </div>
      <div class="dialog-content">
        <slot name="dialog-content">
          <!-- 默认验证码内容 -->
          <CaptchaSection :captcha-image-url="captchaImageUrl" :captcha-loading="captchaLoading"
            :captcha-value="form.captcha" @update:captcha="updateCaptcha" @refresh="refreshCaptcha"
            @confirm="confirmDialog" />
        </slot>
      </div>
      <div class="dialog-footer">
        <button class="dialog-button cancel-button" @click="closeDialog">取消</button>
        <button class="dialog-button confirm-button" @click="confirmDialog">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import type { InputInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { getCaptchaCode, validCode } from '@/services/api/merchant'
import CaptchaSection from '@/components/forms/CaptchaSection.vue'

// 定义组件的属性
interface Props {
  loading?: boolean
  dialogTitle?: string
}

// 定义组件的事件
interface Emits {
  (e: 'confirm', captcha: string): void
  (e: 'cancel'): void
}

// 接收属性
withDefaults(defineProps<Props>(), {
  loading: false,
  dialogTitle: '安全验证'
})

// 定义事件发射器
const emit = defineEmits<Emits>()

// 控制对话框显示
const showDialog = ref(false)

// 验证码相关
const captchaImageUrl = ref('')
const captchaLoading = ref(false)
const captchaInputRef = ref<InputInstance>()

const form = ref({
  captcha: '',
  idCode: ''
})

// 生成随机验证码图片
const generateCaptchaImage = async (): Promise<void> => {
  try {
    captchaLoading.value = true
    const res = await getCaptchaCode()
    captchaImageUrl.value = res.data.captcha
    form.value.idCode = res.data.idCode
  } catch (error) {
    ElMessage.error('验证码获取失败，请重试')
    console.error('获取验证码失败:', error)
  } finally {
    captchaLoading.value = false
  }
}

// 刷新验证码
const refreshCaptcha = (): void => {
  generateCaptchaImage()
}

// 更新验证码输入值
const updateCaptcha = (value: string): void => {
  form.value.captcha = value
}

// 显示对话框
const show = (): void => {
  showDialog.value = true
  form.value.captcha = ''
  nextTick(() => {
    refreshCaptcha()
    // 聚焦到验证码输入框
    setTimeout(() => {
      if (captchaInputRef.value) {
        captchaInputRef.value.focus()
      }
    }, 100)
  })
}

// 关闭对话框
const closeDialog = (): void => {
  showDialog.value = false
  form.value.captcha = ''
  emit('cancel')
}

// 验证输入
const validateInput = (): boolean => {
  if (!form.value.captcha) {
    ElMessage.error('请输入验证码')
    return false
  }

  if (form.value.captcha.length !== 4) {
    ElMessage.error('请输入4位验证码')
    return false
  }

  return true
}

// 确认对话框
const confirmDialog = async (): Promise<void> => {
  if (!validateInput()) {
    return
  }
  const res = await validCode(form.value)
  if (res.code === 200) {
    showDialog.value = false
    emit('confirm', form.value.captcha)
  } else {
    refreshCaptcha()
    form.value.captcha = ''
  }
}

// 暴露方法给父组件
defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.login-button {
  width: 100%;
  margin-top: 10px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  height: 46px;
  background: linear-gradient(120deg, #ff9a00, #ff6b00);
  border: none;
  box-shadow: 0 4px 15px rgba(255, 154, 0, 0.4);
  transition: all 0.3s;
  color: white;
  cursor: pointer;
  position: relative;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 154, 0, 0.5);
  }

  &:active {
    transform: translateY(0);
  }

  &.is-loading {
    pointer-events: none;
  }
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 自定义对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease-out;
}

.dialog-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 400px;
  animation: slideIn 0.3s ease-out;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 10px;
  border-bottom: 1px solid #eee;

  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
}

.dialog-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  &:hover {
    background-color: #f5f5f5;
    color: #333;
  }
}

.dialog-content {
  padding: 20px;
  min-height: 60px;
  color: #666;
  font-size: 16px;
  line-height: 1.5;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 15px 20px;
  border-top: 1px solid #eee;
}

.dialog-button {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;

  &.cancel-button {
    background: #f5f5f5;
    color: #666;

    &:hover {
      background: #e0e0e0;
    }
  }

  &.confirm-button {
    background: #ff6b00;
    color: white;

    &:hover {
      background: #e65100;
    }
  }
}

/* 验证码相关样式 */
.captcha-section {
  .captcha-description {
    margin: 0 0 15px 0;
    text-align: center;
    color: #666;
    font-size: 14px;
  }

  .captcha-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;

    .captcha-input {
      flex: 1;
    }

    .captcha-image-wrapper {
      position: relative;
      width: 120px;
      height: 40px;
      cursor: pointer;

      .captcha-image {
        width: 100%;
        height: 100%;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
      }

      .loading-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;

        i {
          font-size: 20px;
          color: #999;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>